<template>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="height:15rem">
    <van-swipe-item><van-image width="100%" height="15rem" fit="cover" position="left" :src="require('../assets/1.jpg')"/></van-swipe-item>
    <van-swipe-item><van-image width="100%" height="15rem" fit="cover" position="left" :src="require('../assets/2.jpg')"/></van-swipe-item>
    <van-swipe-item><van-image width="100%" height="15rem" fit="cover" position="left" :src="require('../assets/3.jpg')"/></van-swipe-item>
    <van-swipe-item><van-image width="100%" height="15rem" fit="cover" position="left" :src="require('../assets/4.jpg')"/></van-swipe-item>
    </van-swipe>

    <!-- 日期选择 -->
    <van-button  type="success" size="large" color="rgb(0,102,255)" :value="date" @click="show = true">客房预订</van-button>
    <van-calendar v-model:show="show" type="range" @confirm="onConfirm" color="rgb(0,102,255)" :formatter="formatter" confirm-text="查看房型" confirm-disabled-text="查看房型"/>

    <!-- 酒店介绍 -->
    <van-button type="default" size="large" is-link @click="showPopup1"  >酒店介绍</van-button>
    <van-popup v-model:show="showHotel" round position="bottom" :style="{ height: '30%' }"><span style="font-size:25px" >W 酒店是喜达屋旗下的全球现代奢华时尚生活品牌,为宾客提供终极的入住体验。</span></van-popup>

    <!-- 会议中心 -->
    <van-button type="default" size="large" is-link @click="showPopup2"  >会议中心</van-button>
    <van-popup v-model:show="showMeeting" round position="bottom" :style="{ height: '30%' }"><span style="font-size:25px" >会议中心:400-933-3333</span></van-popup>

    <!-- 餐饮美食 -->
    <van-button type="default" size="large" is-link @click="showPopup3"  >餐饮美食</van-button>
    <van-popup v-model:show="showFood" round position="bottom" :style="{ height: '30%' }"><span style="font-size:25px" >稻草鸭 蜜汁火方 龙井虾仁 干炸响铃 西湖纯蔬菜汤 锅烧羊肉..</span></van-popup>

    <!-- 布局 -->
    <van-image width="100%" height="10rem" fit="contain" :src="require('../assets/bottom.jpg')"/>

    <!-- 反馈按钮 -->
    <van-button round type="primary" is-link @click="showPopup4" color="rgb(0,102,255)" plain>反馈·投诉·举报</van-button>
    <van-popup v-model:show="showTag" round position="bottom" :style="{ height: '30%' }"><span style="font-size:25px" >客服:400-100-5678</span></van-popup>


</template>

<script setup>

import { createApp } from 'vue';
import { Calendar } from 'vant';
import { onBeforeMount, ref } from 'vue';
import { Button } from 'vant';
import { Image as VanImage} from 'vant';
import $bus from "../config/eventBus";
const app = createApp();
app.use(Calendar);
app.use(Button);
app.use(VanImage);

const date = ref('');
const show = ref(false)
const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (values) => {
  const [start, end] = values;
  show.value = false;
  date.value = `${formatDate(start)} - ${formatDate(end)}`;
  };
onBeforeMount(() => {
 $bus.emit("tabBarHide", true);
 })
const formatter = (day) => {
const month = day.date.getMonth() + 1;
const date = day.date.getDate();

      if (month === 10) {
        if (date === 1) {
          day.topInfo = '国庆节';
        } else if (date === 4) {
          day.topInfo = '重阳节';
        } 
      }

      if (day.type === 'start') {
        day.bottomInfo = '入住';
      } else if (day.type === 'end') {
        day.bottomInfo = '离店';
      }

      return day;
    };
    
    
    const showHotel = ref(false);
    const showPopup1 = () => {
      showHotel.value = true;
    };
    const showMeeting = ref(false);
    const showPopup2 = () => {
      showMeeting.value = true;
    };
    const showFood = ref(false);
    const showPopup3 = () => {
      showFood.value = true;
    };
    const showTag = ref(false);
    const showPopup4 = () => {
      showTag.value = true;
    };
</script>

<style>
   .w{
    /* color: #fff; */
    font-size: 20px;
   }
   .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #5dbbf6;
  }
   .img{
    width:100%;
    height:20px;
   }
</style>
